<template>
    <div style="position: fixed;left: 0;top: 0;z-index: 100000;user-select: none;" :style="{
        width: formData.move.canMove ? '100vw' : '0',
        height: formData.move.canMove ? '100vh' : '0',
    }" @mousemove="handleMouseMove" @mouseup="handleMouseUp" @mouseenter="handleMouseUp" @mousedown="() => {
        this.data.form.move.moved = false
    }">

        <!-- 浮窗 -->
        <div v-if="this.data.form.status.show != 2"
            style="display: inline-block;position: fixed;background-color: rgba(220,220,220,0.6);backdrop-filter: blur(20px);transition-property: width,height,box-shadow,border-radius,top,right,scale,opacity;transition-timing-function: cubic-bezier(0.23, 1, 0.320, 1);"
            :style="{
                width: formStatus ? formData.width : '45px',
                height: formDisplay ? 'calc(100vh - 50px)' : (formStatus ? formData.height : '45px'),
                borderRadius: formDisplay ? '0' : (formStatus ? formData.borderRadius : '5px 0 0 5px'),
                right: formDisplay ? '0' : (formStatus ? formData.right : '0px'),
                top: formDisplay ? '50px' : (formStatus ? formData.top : formData.minTop),
                padding: formStatus ? '2px' : '0px',
                boxShadow: formDisplay ? '0 4px 10px rgba(0,0,0,0.3)' : (formStatus ? '0 10px 30px rgba(0,0,0,0.5)' : '0 0 0 transparent'),
                transitionDuration: formShowAnm ? '.3s' : '0s',
                scale: formData.status.show == 0 ? '100%' : '90%',
                opacity: formData.status.show == 0 ? '1' : '0'
            }">
            <div v-if="formStatus && formDisplay == 0" @mousedown="handleMouseDown($event, 3)" class="resizer"
                style="width: 5px;height: calc(100% - 20px);position: absolute;right: -3px;top: 10px;display: inline-block;cursor: ew-resize;">

            </div>
            <div v-if="formStatus && formDisplay == 0" @mousedown="handleMouseDown($event, 4)" class="resizer"
                style="width: calc(100% - 20px);height: 5px;position: absolute;left:10px;bottom: -3px;display: inline-block;cursor: ns-resize;">

            </div>
            <div v-if="formStatus && formDisplay == 0" @mousedown="handleMouseDown($event, 5)" class="resizer"
                style="width: 20px;height: 20px;display: inline-block;position: absolute;right: -3px;bottom: -3px;cursor: nwse-resize;"
                :style="{
                    borderRadius: '0 0 12px 0'
                }">

            </div>
            <div v-if="formDisplay == 1" @mousedown="handleMouseDown($event, 6)" class="resizer"
                style="width: 5px;height: calc(100%);display: inline-block;position: absolute;left: -3px;bottom: 0px;cursor: ew-resize;"
                :style="{

                }">

            </div>
            <div v-if="this.data.form.status.position != 3"
                style="width: 100%;height: 100%;border-radius: 10px;background-color: white;overflow: hidden;transition: opacity .2s cubic-bezier(0.23, 1, 0.320, 1);position: relative;z-index: 100010;"
                :style="{
                    opacity: this.data.form.status.position == 0 ? '1' : '0'
                }">
                <div style="width: 100%;height: 40px">
                    <div title="关闭"
                        style="width: 40px;height: 40px;padding-left: calc(40px / 2);padding-top: calc(40px / 2);float: right;"
                        class="button" @click="controlRightShow(false)">
                        <svg style="transform: translate(-50%,-50%);" width="16" height="16" viewBox="0 0 48 48"
                            fill="currentColor">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M23.886 20.957L37.32 7.522a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.415L26.714 23.786 40.149 37.22a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L23.886 26.614 10.45 40.049a1 1 0 01-1.415 0l-1.414-1.414a1 1 0 010-1.414l13.435-13.435L7.622 10.35a1 1 0 010-1.415l1.414-1.414a1 1 0 011.415 0l13.435 13.435z"
                                fill="currentColor" />
                        </svg>
                    </div>
                    <div v-if="formDisplay != 1" title="最小化"
                        style="width: 40px;height: 40px;padding-left: calc(40px / 2);padding-top: 21.5px;float: right;"
                        class="button" @click="() => {
                            controlMin(true)
                        }">
                        <span style="transform: translate(-50%,-50%);display: inline-block;"><svg
                                style="transform: rotate(45deg);" width="14" height="14" viewBox="0 0 48 48"
                                fill="currentColor">
                                <path d="M6.586 38.586a2 2 0 102.828 2.828l32-32a2 2 0 00-2.828-2.828l-32 32z"
                                    fill="currentColor" />
                            </svg></span>
                    </div>
                    <div style="line-height: 40px;display: inline-block;padding-left: 15px;color: dimgray;padding-right: 10px;float: left;width: calc(100% - 160px);"
                        :style="{
                            cursor: formDisplay ? 'unset' : 'move'
                        }" @mousedown="() => {
                            handleMouseDown($event, 1)
                        }">
                        预览
                    </div>
                    <div v-if="this.data.form.showSetting"
                        style="display: inline-block;width: 130px;border-radius: 5px;background-color: rgba(242,242,242,0.6);box-shadow: 0 4px 10px rgba(0,0,0,0.3);position: absolute;right: 10px;top: 40px;z-index: 100020;backdrop-filter: blur(20px);overflow: hidden;">
                        <div v-if="formData.status.display == 0" class="button"
                            style="padding: 10px 10px;width: 100%;border-radius: 0;" @click="() => {
                                setDefaultFormSize()
                                formData.showSetting = false
                            }">默认尺寸和位置</div>
                        <div @click="() => {
                            changeDisplay(1)
                            formData.status.display = 1
                            formData.showSetting = false
                        }" v-if="formData.status.display == 0" class="button"
                            style="padding: 10px 10px;width: 100%;border-radius: 0;">切换为右侧栏</div>
                        <div @click="() => {
                            changeDisplay(0)
                            formData.status.display = 0
                            formData.showSetting = false
                        }" v-if="formData.status.display == 1" class="button"
                            style="padding: 10px 10px;width: 100%;border-radius: 0;">切换为浮窗</div>
                        <div @click="() => {
                            changeTemplate(1)
                        }" v-if="formData.status.preview == false" class="button"
                            style="padding: 10px 10px;width: 100%;border-radius: 0;">切换为Preview</div>
                        <div @click="() => {
                            changeTemplate(0)
                        }" v-if="formData.status.preview" class="button"
                            style="padding: 10px 10px;width: 100%;border-radius: 0;">切换为Template</div>
                    </div>
                    <div title="设置" @click="this.data.form.showSetting = !this.data.form.showSetting"
                        style="width: 40px;height: 40px;padding-left: calc(40px / 2);padding-top: calc(40px / 2);float: right;position: relative;"
                        class="button">
                        <svg style="transform: translate(-50%,-50%);" width="16" height="16" viewBox="0 0 48 48"
                            fill="currentColor">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M28.767 2.71A21.685 21.685 0 0024 2.182c-1.618 0-3.215.178-4.768.528l-.897.202-2.795 6.373-6.883-.752-.622.677a21.82 21.82 0 00-4.772 8.295l-.27.872L7.089 24 3.53 28.886l-.537.737.27.872a21.82 21.82 0 004.772 8.295l.622.677 6.883-.752 2.426 5.531.369.842.896.202c1.554.35 3.15.528 4.769.528 1.618 0 3.214-.178 4.767-.528l.897-.201 2.796-6.374 6.883.752.622-.677a21.82 21.82 0 004.771-8.294l.27-.871L40.912 24l3.559-4.887.537-.738-.27-.87a21.82 21.82 0 00-4.772-8.295l-.622-.677-6.883.752-2.796-6.373-.897-.202zM20.916 6.08A18.109 18.109 0 0124 5.818c1.043 0 2.073.089 3.084.263l2.24 5.109a2.976 2.976 0 003.05 1.763l5.507-.603a18.182 18.182 0 013.096 5.382l-3.289 4.516a2.976 2.976 0 000 3.504l3.289 4.516a18.182 18.182 0 01-3.096 5.382l-5.508-.603a2.976 2.976 0 00-3.049 1.763l-2.24 5.109c-1.011.174-2.041.263-3.084.263-1.043 0-2.073-.089-3.084-.263l-2.24-5.108a2.976 2.976 0 00-3.05-1.764l-5.508.603a18.185 18.185 0 01-3.095-5.383l3.289-4.515c.76-1.044.76-2.46 0-3.504l-3.29-4.515a18.186 18.186 0 013.096-5.383l5.509.603a2.976 2.976 0 003.049-1.763l2.24-5.109zM24 14.91c5.004 0 9.056 4.072 9.056 9.091 0 5.019-4.052 9.09-9.056 9.09S14.944 29.02 14.944 24s4.052-9.09 9.056-9.09zM18.58 24c0-3.014 2.429-5.454 5.42-5.454s5.42 2.44 5.42 5.454-2.429 5.455-5.42 5.455-5.42-2.44-5.42-5.455z"
                                fill="currentColor" />
                        </svg>
                    </div>
                    <div title="刷新"
                        v-if="this.data.currentBodyInfo != undefined && this.data.currentOtherBodyInfo != undefined"
                        @click="() => {
                            refreshData(this.data.currentBodyInfo, this.data.currentOtherBodyInfo)
                        }"
                        style="width: 40px;height: 40px;padding-left: calc(40px / 2);padding-top: calc(40px / 2);float: right;position: relative;"
                        class="button">
                        <svg style="transform: translate(-50%,-50%);" width="16" height="16" viewBox="0 0 48 48"
                            fill="currentColor">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M29 20a1 1 0 01-1-1v-2a1 1 0 011-1h6.49c-2.53-3.627-6.732-6-11.49-6-7.732 0-14 6.268-14 14s6.268 14 14 14c6.342 0 11.699-4.217 13.42-10h4.134C39.734 36.017 32.566 42 24 42c-9.941 0-18-8.059-18-18S14.059 6 24 6c5.655 0 10.701 2.608 14.001 6.687L38 7a1 1 0 011-1h2a1 1 0 011 1v11a2 2 0 01-1.85 1.994L40 20H29z"
                                fill="currentColor" />
                        </svg>
                    </div>
                </div>
                <div v-if="this.data.form.incomData != undefined && formData.status.error == ''"
                    style="width: 100%;height: calc(100% - 40px);overflow-y: auto;overflow-x: hidden;position: relative;">
                    <!-- 在这里添加展示数据的vue组件 -->
                    <view1 @startLoad="controlLoading(true)" :width="parseInt(formData.width.split('px')[0])" @loadedData="handleTemplateLoaded"
                        v-if="(this.data.form.currentTemplateName == '/list/right' || this.data.form.currentTemplateName == '/Option/right') && formData.status.preview == false"
                        :incomData="this.data.form.incomData"></view1>
                    <pagePreview @startLoad="controlLoading(true)" :width="parseInt(formData.width.split('px')[0])" @loadedData="handleTemplateLoaded"
                        v-if="(this.data.form.currentTemplateName == '/list/right' || this.data.form.currentTemplateName == '/Option/right') && formData.status.preview"
                        :incomData="this.data.form.incomData"></pagePreview>
                </div>
                <div v-if="formData.status.error != ''"
                    style="width: 100%;height: calc(100% - 40px);overflow: hidden;padding-left: 50%;" :style="{
                        paddingTop: formDisplay ? 'calc((100vh - 50px) / 2)' : ('calc((' + formData.height + ' - 40px) / 2)'),
                    }">

                    <div style="display: inline-block;transform: translate(-50%,-50%);text-align: center;">
                        <svg width="32" height="32" viewBox="0 0 48 48" fill="currentColor">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M24 46c12.15 0 22-9.85 22-22S36.15 2 24 2 2 11.85 2 24s9.85 22 22 22zm0-4c-9.941 0-18-8.059-18-18S14.059 6 24 6s18 8.059 18 18-8.059 18-18 18zm4.95-25.778a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.414L26.828 24l4.95 4.95a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L24 26.828l-4.95 4.95a1 1 0 01-1.414 0l-1.414-1.414a1 1 0 010-1.414l4.95-4.95-4.95-4.95a1 1 0 010-1.414l1.414-1.414a1 1 0 011.414 0l4.95 4.95 4.95-4.95z"
                                fill="currentColor" />
                        </svg>
                        <br>
                        <div style="display: inline-block;margin-top: 10px;font-size: 14px;font-weight: bold;">{{
                            formData.status.error }}
                        </div>
                    </div>
                </div>
                <div v-if="formData.status.loading != 2 && formData.status.error == ''"
                    style="width: 100%;height: calc(100% - 40px);position: absolute;bottom: 0;left: 0;z-index: 100005;padding-left: 50%;backdrop-filter: blur(20px);transition: opacity .3s cubic-bezier(0.23, 1, 0.320, 1);background-color: rgba(255,255,255,0.6);"
                    :style="{
                        paddingTop: formDisplay ? 'calc((100vh - 50px) / 2)' : ('calc((' + formData.height + ' - 40px) / 2)'),
                        opacity: formData.status.loading == 0 ? 1 : 0,
                    }">
                    <div style="display: inline-block;transform: translate(-50%,-50%);text-align: center;">
                        <div style="--size: 32px; --dot-size: 3px; --dot-count: 6; --color: black; --speed: 1s; --spread: 60deg;display: inline-block;"
                            class="dots">
                            <div style="--i: 0;" class="dot"></div>
                            <div style="--i: 1;" class="dot"></div>
                            <div style="--i: 2;" class="dot"></div>
                            <div style="--i: 3;" class="dot"></div>
                            <div style="--i: 4;" class="dot"></div>
                            <div style="--i: 5;" class="dot"></div>
                        </div>
                        <br>
                        <div style="display: inline-block;font-size: 14px;color: black;font-weight: bold;">请稍后</div>
                    </div>
                </div>
            </div>
            <div @mousedown="handleMouseDown($event, 2)" @click="() => {
                if (this.data.form.move.moved) return
                controlMin(false)
            }" class="button" v-if="!formStatus"
                style="width: 100%;height: 100%;line-height: 100%;transition: opacity .3s cubic-bezier(0.23, 1, 0.320, 1);padding-left: calc(45px / 2);padding-top: calc(45px / 2);color: dimgray;"
                :style="{
                    opacity: this.data.form.status.position == 3 ? '1' : '0'
                }">
                <svg style="transform: translate(-50%,-50%);" width="20" height="20" viewBox="0 0 48 48"
                    fill="currentColor">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M26 20V10h16v10H26zM22 8c0-1.105.9-2 2-2h20c1.1 0 2 .895 2 2v14c0 1.105-.9 2-2 2H24c-1.1 0-2-.895-2-2V8zM4 10h14v4H5.976v24h32.043V28H42v12c0 1.105-.886 2-2.003 2H4c-1.096 0-2-.895-2-2V12c0-1.105.873-2 2-2z"
                        fill="currentColor" />
                </svg>
            </div>
        </div>

    </div>
</template>

<script>
import view1 from './views/TemplateDisplayView.vue'
import pagePreview from './preview/pagePreview.vue';


export default {
    components: {
        view1, pagePreview
    },
    computed: {
        formData() {
            return this.data.form
        },
        boxShadow() {
            return '0 4px 10px rgba(0,0,0,0.3)'
            if (this.data.form.status.display == 1) {

            }
            if (this.data.form.status.position == 2) {

            }
        },
        showAnm() {
            if (this.data.form.status.display == 1) {
                return false
            }
            if (this.data.form.status.position == 1) {
                return true
            }
            return false
        },
        log() {
            return console.log
        },
        d() {
            return this.data
        },
        formShowAnm() {
            return this.data.form.status.position == 1 || this.data.form.status.position == 2
        },
        formStatus() {
            return this.data.form.status.position <= 1
        },
        formDisplay() {
            return this.data.form.status.display
        },
        pageContainerWidth() {
            return document.getElementById('header').clientWidth
        }
    },
    watch: {
        async refresh() {
            let info = this.refresh
            if (info.opName == 'showAndRefreshRight') {
                if (this.data.form.status.show != 2) {
                    await this.controlMin(false)
                } else {
                    await this.controlRightShow(true)
                }
                await this.refreshData(info.bodyInfo, info.otherBodyInfo == undefined ? {} : info.otherBodyInfo)
            }
            if (info.opName == 'refreshRight') {
                await this.refreshData(this.data.currentBodyInfo, this.data.currentOtherBodyInfo)
            }
        }
    },
    data() {
        return {
            data: {
                form: {
                    status: {
                        position: 0,
                        display: 0,
                        show: 2,
                        loading: 2,
                        error: '',
                        loadingStrict: false,
                        preview: false,
                    },
                    width: '0px',
                    height: '0px',
                    top: '0px',
                    right: '0px',
                    borderRadius: '10px',
                    minTop: '100px',
                    move: {
                        canMove: 0,
                        lastX: undefined,
                        lastY: undefined,
                        moved: false,
                    },
                    incomData: undefined,
                    currentTemplateName: '',
                    showSetting: false,
                },
                currentBodyInfo: undefined,
                currentOtherBodyInfo: undefined
            }
        };
    },
    methods: {
        changeTemplate(op) {
            this.data.form.showSetting = false
            this.refreshData(this.data.currentBodyInfo, this.data.currentOtherBodyInfo, op)
        },
        changeDisplay(displayCode = this.data.form.status.display, onlySendToParentCompnent = false) {
            if (onlySendToParentCompnent == false) {
                this.data.form.status.display = displayCode
                if (displayCode == 1) {
                    let currentWidth = parseInt(this.data.form.width.split('px')[0])
                    if (currentWidth > (this.pageContainerWidth - 245)) {
                        currentWidth = this.pageContainerWidth - 245
                        this.data.form.width = currentWidth.toString() + 'px'
                    }
                }
                localStorage.setItem('rightDisplay', displayCode.toString())
            }
            if (displayCode == 0) {
                this.$emit('changeDisplay', {
                    code: 0,
                })
            }
            if (displayCode == 1) {
                this.$emit('changeDisplay', {
                    code: 1,
                    width: this.data.form.width
                })
            }
        },
        handleMouseDown(e, canMoveCode) {
            this.data.form.move.lastX = undefined
            this.data.form.move.canMove = canMoveCode
        },
        async handleTemplateLoaded() {
            await this.waitSeconds(0.2)
            this.controlLoading(false)
        },
        async controlLoading(op) {
            if (op) {
                if (this.data.form.status.loading == 0) return
                this.data.form.status.loadingStrict = true
                // this.data.form.status.loading = 1
                this.data.form.status.loading = 0
                // await this.waitSeconds(0.3)
                // this.data.form.status.loading = 0
            } else {
                if (this.data.form.status.loading == 2) return
                this.data.form.status.loading = 1
                await this.waitSeconds(0.3)
                this.data.form.status.loadingStrict = false
                this.data.form.status.loading = 2
            }
        },
        async controlRightShow(op) {
            if (op) {
                if (this.data.form.status.show == 0) return
                let display = localStorage.getItem('rightDisplay')
                if (display != null) {
                    this.changeDisplay(parseInt(display))
                }
                this.data.form.showSetting = false
                this.data.form.status.position = 1
                await this.waitSeconds(0.01)
                this.data.form.status.show = 1
                await this.waitSeconds(0.01)
                this.data.form.status.show = 0
                await this.waitSeconds(0.3)
                this.data.form.status.position = 0
                this.changeDisplay(this.data.form.status.display)
            } else {
                if (this.data.form.status.show == 2) return
                this.data.form.status.position = 1
                await this.waitSeconds(0.001)
                this.data.form.status.show = 1
                await this.waitSeconds(0.3)
                this.data.form.status.show = 2
                this.data.form.status.position = 0
                this.changeDisplay(0, true)
            }

        },
        //设置默认位置和宽高
        async setDefaultFormSize() {
            let currentPageInfo = {
                height: document.body.clientHeight,
                width: document.body.clientWidth,
            }
            let preSet = {
                height: currentPageInfo.height * 0.7,
                width: (currentPageInfo.height * 0.7) / 2.16744,
                top: 0,
                right: 0
            }
            preSet.right = 30
            preSet.top = (currentPageInfo.height - preSet.height) / 2
            this.data.form.status.position = 1
            await this.waitSeconds(0.001)
            this.data.form.width = preSet.width.toString() + 'px'
            this.data.form.height = preSet.height.toString() + 'px'
            this.data.form.top = preSet.top.toString() + 'px'
            this.data.form.right = preSet.right.toString() + 'px'
            await this.waitSeconds(0.3)
            this.data.form.status.position = 0
        },
        handleMouseUp() {
            if (this.data.form.move.canMove == 1) {
                let currentRight = parseInt(this.data.form.right.split('px'))
                let currentWidth = parseInt(this.data.form.width.split('px'))
                let currentX = document.body.clientWidth - currentRight - currentWidth
                if (currentRight < 0) {
                    this.data.form.right = '0px'
                }
                if (currentX < 0) {
                    this.data.form.right = (document.body.clientWidth - currentWidth).toString() + 'px'
                }
                let currentTop = parseInt(this.data.form.top.split('px'))
                let currentHeight = parseInt(this.data.form.height.split('px'))
                if (currentTop < 0) {
                    this.data.form.top = '0px'
                }
                if (currentTop > document.body.clientHeight - currentHeight) {
                    this.data.form.top = (document.body.clientHeight - currentHeight).toString() + 'px'
                }
            }
            this.data.form.move.canMove = 0
        },
        handleMouseMove(e) {
            this.data.form.move.moved = true
            if (this.data.form.move.canMove == 0) {
                if (this.formDisplay == 1) return
                this.data.form.move.lastX = e.x
                this.data.form.move.lastY = e.y
                return
            }
            if (this.data.form.move.lastX == undefined) {
                this.data.form.move.lastX = e.x
                this.data.form.move.lastY = e.y
                return
            }
            if (this.data.form.move.canMove == 1) {
                let currentX = e.x
                let currentY = e.y
                let currentFormX = document.body.clientWidth - parseInt(this.data.form.right.split('px')[0]) - parseInt(this.data.form.width.split('px')[0])
                let currentFormY = parseInt(this.data.form.top.split('px')[0])
                let lastX = this.data.form.move.lastX
                let lastY = this.data.form.move.lastY
                currentFormX += (currentX - lastX)
                currentFormY += (currentY - lastY)
                this.data.form.move.lastX = e.x
                this.data.form.move.lastY = e.y
                this.data.form.top = currentFormY.toString() + 'px'
                this.data.form.right = (document.body.clientWidth - (currentFormX + parseInt(this.data.form.width.split('px')[0]))) + 'px'
            }
            if (this.data.form.move.canMove == 2) {
                let currentX = e.x
                let currentY = e.y
                let currentFormX = document.body.clientWidth - parseInt(this.data.form.right.split('px')[0]) - parseInt(this.data.form.width.split('px')[0])
                let currentFormY = parseInt(this.data.form.minTop.split('px')[0])
                let lastX = this.data.form.move.lastX
                let lastY = this.data.form.move.lastY
                currentFormX += (currentX - lastX)
                currentFormY += (currentY - lastY)
                // this.data.form.move.lastX = e.x
                this.data.form.move.lastY = e.y
                this.data.form.minTop = currentFormY.toString() + 'px'
                // this.data.form.right = (document.body.clientWidth - (currentFormX + parseInt(this.data.form.width.split('px')[0]))) + 'px'
            }
            if (this.data.form.move.canMove == 3) {
                let currentX = e.x
                // let currentY = e.y
                let currentFormWidth = parseInt(this.data.form.width.split('px')[0])
                let currentFormRight = parseInt(this.data.form.right.split('px')[0])
                // let currentFormY = parseInt(this.data.form.top.split('px')[0])
                let lastX = this.data.form.move.lastX
                // let lastY = this.data.form.move.lastY
                currentFormWidth += (currentX - lastX)
                currentFormRight += (currentX - lastX) * -1
                // currentFormY += (currentY - lastY)
                this.data.form.move.lastX = e.x
                // this.data.form.move.lastY = e.y
                // this.data.form.top = currentFormY.toString() + 'px'
                if (currentFormWidth < 245) return
                this.data.form.width = currentFormWidth.toString() + 'px'
                this.data.form.right = currentFormRight.toString() + 'px'
            }
            if (this.data.form.move.canMove == 4) {
                // let currentX = e.x
                let currentY = e.y
                let currentFormHeight = parseInt(this.data.form.height.split('px')[0])
                // let currentFormY = parseInt(this.data.form.top.split('px')[0])
                // let lastX = this.data.form.move.lastX
                let lastY = this.data.form.move.lastY
                // currentFormWidth += (currentX - lastX)
                currentFormHeight += (currentY - lastY)
                // this.data.form.move.lastX = e.x
                this.data.form.move.lastY = e.y
                // this.data.form.top = currentFormY.toString() + 'px'
                if (currentFormHeight < 290) return
                this.data.form.height = currentFormHeight.toString() + 'px'
            }
            if (this.data.form.move.canMove == 5) {
                // let currentX = e.x
                let currentY = e.y
                let currentFormHeight = parseInt(this.data.form.height.split('px')[0])
                // let currentFormY = parseInt(this.data.form.top.split('px')[0])
                // let lastX = this.data.form.move.lastX
                let lastY = this.data.form.move.lastY
                // currentFormWidth += (currentX - lastX)
                currentFormHeight += (currentY - lastY)
                // this.data.form.move.lastX = e.x
                this.data.form.move.lastY = e.y
                // this.data.form.top = currentFormY.toString() + 'px'
                if (currentFormHeight >= 290) {
                    this.data.form.height = currentFormHeight.toString() + 'px'
                }

                let currentX = e.x
                // let currentY = e.y
                let currentFormWidth = parseInt(this.data.form.width.split('px')[0])
                let currentFormRight = parseInt(this.data.form.right.split('px')[0])
                // let currentFormY = parseInt(this.data.form.top.split('px')[0])
                let lastX = this.data.form.move.lastX
                // let lastY = this.data.form.move.lastY
                currentFormWidth += (currentX - lastX)
                currentFormRight += (currentX - lastX) * -1
                // currentFormY += (currentY - lastY)
                this.data.form.move.lastX = e.x
                // this.data.form.move.lastY = e.y
                // this.data.form.top = currentFormY.toString() + 'px'
                if (currentFormWidth >= 245) {
                    this.data.form.width = currentFormWidth.toString() + 'px'
                    this.data.form.right = currentFormRight.toString() + 'px'
                }
            }
            if (this.data.form.move.canMove == 6) {
                let currentX = e.x
                let currentFormWidth = parseInt(this.data.form.width.split('px')[0])
                let lastX = this.data.form.move.lastX
                currentFormWidth += lastX - currentX
                this.data.form.move.lastX = e.x
                if (currentFormWidth < 245) {
                    return
                }
                if (currentFormWidth > (this.pageContainerWidth - 245)) {
                    return
                }
                this.data.form.width = currentFormWidth.toString() + 'px'
                this.changeDisplay(this.data.form.status.display, true)
            }
        },
        async controlMin(op) {
            if (op) {
                if (this.data.form.status.position == 3) return
                this.data.form.status.position = 1
                await this.waitSeconds(0.001)
                this.data.form.status.position = 2
                await this.waitSeconds(0.3)
                this.data.form.status.position = 3
            } else {
                if (this.data.form.status.position == 0) return
                this.data.form.showSetting = false
                this.data.form.status.position = 2
                await this.waitSeconds(0.001)
                this.data.form.status.position = 1
                await this.waitSeconds(0.3)
                this.data.form.status.position = 0
            }
        },
        waitSeconds(n) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve()
                }, n * 1000);
            })
        },
        async startRoute(bodyInfo = {}, otherBodyInfo = {}) {
            const rc = require('./rc')
            let re = await rc.default.tableRowClick(bodyInfo, otherBodyInfo)
            return re
        },
        async refreshData(bodyInfo = {}, otherBodyInfo = {}, changeTempate = undefined) {
            if (this.data.form.status.loadingStrict) return
            this.data.form.status.error = ''
            this.controlLoading(true)
            this.data.currentBodyInfo = bodyInfo
            this.data.currentOtherBodyInfo = otherBodyInfo
            let re = await this.startRoute(bodyInfo, otherBodyInfo)
            this.data.form.incomData = undefined
            if (changeTempate != undefined) {
                this.data.form.status.preview = changeTempate
            }
            await this.waitSeconds(0.001)
            if (typeof (re) != 'object') {
                this.data.form.status.error = re
                this.controlLoading(false)
            } else {
                this.data.form.incomData = re.urls
                await this.waitSeconds(0.001)
                this.data.form.currentTemplateName = re.url
            }
        }
    },
    async mounted() {
        this.setDefaultFormSize()

        this.changeDisplay(this.data.form.status.display, true)
    },
    props: {
        refresh: {
            type: Object,
            default: {}
        }
    }
};
</script>

<style>
/* 为整个页面或特定元素设置滚动条样式 */
::-webkit-scrollbar {
    /* 针对Webkit内核浏览器（如Chrome、Safari） */
    width: 6px;
    /* 滚动条宽度 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0);
    /* 轨道颜色 */
}

/* 滚动条拇指 */
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    /* 滑块颜色 */
    border-radius: 5px;
    /* 圆角 */
}

/* 当鼠标悬停时改变滑块的颜色 */
::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}


.button {
    display: inline-block;
    border-radius: 5px;
}

.button:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.button:active {
    background-color: rgba(0, 0, 0, 0.05);
}

.resizer {
    transition: background-color .3s cubic-bezier(0.23, 1, 0.320, 1);
}

.resizer:active {
    background-color: rgb(0, 120, 215);
}
</style>